<template>
  <div class="bot_nav_box">
    <router-link to="/">
      <div class="title">首页</div>
    </router-link>
    <router-link to="/category">
      <div class="title">分类</div>
    </router-link>
    <router-link to="/cart">
        <div class="title">购物车</div>
    </router-link>
    <router-link to="/user">
      <div class="title">我的</div>
    </router-link>
  </div>
</template>

<script>
    export default {
        data() {
            return {};
        },
    };
</script>
<style lang='less' scoped>
    .bot_nav_box {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        background-color: #fff;
        width: 100%;
        height: 50px;
        a {
            display: block;
            flex: 1;
            color: #333;
            position: relative;
            .iconfont {
                font-size: 20px;
            }
            .title {}
            &.current-exact {
                color: rgb(118, 211, 65);
            }
            .cart_num_icon {
                position: absolute;
                width: 20px;
                height: 20px;
                line-height: 20px;
                border-radius: 50%;
                background-color: red;
                color: #fff;
                top: 0;
                left: 50%;
                font-size: 12px;
            }
        }
    }
</style>